<template>
  <div>
    <div class="mb-4">
      <el-button icon="Plus" @click="userLoginAxios">Axios.userLogin</el-button>
      <el-button icon="User" @click="userInfoAxios">Axios.userInfo</el-button>
      <el-button icon="User" @click="userLogoutAxios">Axios.userLogout</el-button>
    </div>
    <div class="mb-4">
      <el-button icon="Plus" @click="userLoginRequest">Request.userLogin</el-button>
      <el-button icon="User" @click="userInfoRequest">Request.userInfo</el-button>
      <el-button icon="User" @click="userLogoutRequest">Request.userLogout</el-button>
    </div>
    <div class="mb-4">
      <el-button icon="Plus" @click="userLoginRequestApi">Api.Request.userLogin</el-button>
      <el-button icon="User" @click="userInfoRequestApi">Api.Request.userInfo</el-button>
      <el-button icon="User" @click="userLogoutRequestApi">Api.Request.userLogout</el-button>
    </div>
    <div class="mb-4">
      <el-button icon="Plus" @click="userLoginRequestApiPinia">Pinia.Api.Request.userLogin</el-button>
      <el-button icon="User" @click="userInfoRequestApiPinia">Pinia.Api.Request.userInfo</el-button>
      <el-button icon="User" @click="userLogoutRequestApiPinia">Pinia.Api.Request.userLogout</el-button>
    </div>
    <h1>领域页面：区域一块...</h1>
    <svg-icon name="home" width="24px" height="24px" color="#1890ff"></svg-icon>
  </div>
</template>

<script setup lang="ts">
// 测试一：Axios请求MockJS数据（原生方式）
// Axios [return] data: {data: {…}, status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …}
import axios from "axios";
const userLoginAxios = async () => {
  await axios({
    url: "/api/user/login",
    method: "post",
    data: {
      username: "admin",
      password: "111111",
    },
    headers: {
      "Content-Type": "application/json", // JSON格式
      // 'Content-Type': 'application/x-www-form-urlencoded', // 表单格式
    },
  })
    .then((result: any) => {
      console.log("Axios [return] data:", result);
    })
    .catch((error: any) => {
      console.error("Axios [return] error:", error);
    });
};
const userInfoAxios = async () => {
  await axios({
    url: "/api/user/info",
    method: "get",
    params: {
      username: "admin",
      password: "111111",
    },
    headers: {
      "X-Requested-With": "XMLHttpRequest",
      token: "Admin Token",
    },
  })
    .then((result: any) => {
      console.log("Axios [return] data:", result);
    })
    .catch((error: any) => {
      console.error("Axios [return] error:", error);
    });
};
const userLogoutAxios = async () => {
  await axios({
    url: "/api/user/logout",
    method: "get",
    params: {
      username: "admin",
      password: "111111",
    },
    headers: {
      "X-Requested-With": "XMLHttpRequest",
      token: "Admin Token",
    },
  })
    .then((result: any) => {
      console.log("Axios [return] data:", result);
    })
    .catch((error: any) => {
      console.error("Axios [return] error:", error);
    });
};

// 测试二：Axios请求MockJS数据（二次封装）
// 请求成功: {transitional: {…}, adapter: Array(3), transformRequest: Array(1), transformResponse: Array(1), timeout: 5000, …}
// 响应成功: {data: {…}, status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …}
// Request [return] data: {code: 200, data: 'Admin Token', message: 'success', okay: true}
import request from "@/utils/request.ts";
const userLoginRequest = async () => {
  await request({
    url: "/user/login",
    method: "post",
    data: {
      username: "admin",
      password: "111111",
    },
    headers: {
      "Content-Type": "application/json", // JSON格式
      // 'Content-Type': 'application/x-www-form-urlencoded', // 表单格式
    },
  })
    .then((result: any) => {
      console.log("Request [return] data:", result);
    })
    .catch((error: any) => {
      console.error("Request [return] error:", error);
    });
};
const userInfoRequest = async () => {
  await request({
    url: "/user/info",
    method: "get",
    params: {
      username: "admin",
      password: "111111",
    },
    headers: {
      "X-Requested-With": "XMLHttpRequest",
      token: "Admin Token",
    },
  })
    .then((result: any) => {
      console.log("Request [return] data:", result);
    })
    .catch((error: any) => {
      console.error("Request [return] error:", error);
    });
};
const userLogoutRequest = async () => {
  await request({
    url: "/user/logout",
    method: "get",
    params: {
      username: "admin",
      password: "111111",
    },
    headers: {
      "X-Requested-With": "XMLHttpRequest",
      token: "Admin Token",
    },
  })
    .then((result: any) => {
      console.log("Request [return] data:", result);
    })
    .catch((error: any) => {
      console.error("Request [return] error:", error);
    });
};

// 测试三：Axios请求MockJS数据（二次封装）Api优化版
// 请求成功: {transitional: {…}, adapter: Array(3), transformRequest: Array(1), transformResponse: Array(1), timeout: 5000, …}
// 响应成功: {data: {…}, status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …}
// Api [return] data: {code: 200, data: 'Admin Token', message: 'success', okay: true}
import { userLoginApi, userInfoApi, userLogoutApi } from "@/api/user/index.ts";
const userLoginRequestApi = async () => {
  let data = {
    username: "admin",
    password: "111111",
  };
  let headers = {
    "Content-Type": "application/json", // JSON格式
    // 'Content-Type': 'application/x-www-form-urlencoded', // 表单格式
  };
  let res = await userLoginApi(data, headers);
  console.log("Api [return] data:", res);
};
const userInfoRequestApi = async () => {
  let params = {
    username: "admin",
    password: "111111",
  };
  let headers = {
    "X-Requested-With": "XMLHttpRequest",
    token: "Admin Token",
  };
  let res = await userInfoApi(params, headers);
  console.log("Api [return] data:", res);
};
const userLogoutRequestApi = async () => {
  let params = {
    username: "admin",
    password: "111111",
  };
  let headers = {
    "X-Requested-With": "XMLHttpRequest",
    token: "Admin Token",
  };
  let res = await userLogoutApi(params, headers);
  console.log("Api [return] data:", res);
};

// 测试四：Axios请求MockJS数据（二次封装）Api优化版之经过Pinia状态管理库版
// 请求成功: {transitional: {…}, adapter: Array(3), transformRequest: Array(1), transformResponse: Array(1), timeout: 5000, …}
// 响应成功: {data: {…}, status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …}
// Pinia [return] data: {code: 200, data: 'Admin Token', message: 'success', okay: true}
import useUserStore from '@/store/modules/user';
let userStore = useUserStore();
let userLoginRequestApiPinia = async () => {
  let data = {
    username: "admin",
    password: "111111",
  };
  let headers = {
    "Content-Type": "application/json", // JSON格式
    // 'Content-Type': 'application/x-www-form-urlencoded', // 表单格式
  };
  let res = await userStore.userLoginAction(data, headers);
  console.log("Pinia [return] data:", res);
};
const userInfoRequestApiPinia = async () => {
  let params = {
    username: "admin",
    password: "111111",
  };
  let headers = {
    "X-Requested-With": "XMLHttpRequest",
    token: "Admin Token",
  };
  let res = await userStore.userInfoAction(params, headers);
  console.log("Pinia [return] data:", res);
};
const userLogoutRequestApiPinia = async () => {
  let params = {
    username: "admin",
    password: "111111",
  };
  let headers = {
    "X-Requested-With": "XMLHttpRequest",
    token: "Admin Token",
  };
  let res = await userStore.userLogoutAction(params, headers);
  console.log("Pinia [return] data:", res);
};
</script>

<style scoped lang="scss"></style>
